<template>
  <div class="recommend">
    <div class="title">热销推荐</div>
    <div class="list">
      <ul>
        <li class="border-bottom" v-for="item of list" :key="item.id">
          <img :src="item.imgUrl" class="img" />
          <p class="info">
            <span class="tit">{{item.title}}</span>
            <span class="desc">{{item.desc}}</span>
            <a :href="item.url" class="more">查看详情</a>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl';

.recommend {
  margin-top: 0.2rem;

  .list {
    li {
      height: 1.9rem;
      padding: 0.1rem;

      .img {
        float: left;
        width: 1.7rem;
        height: 1.7rem;
        padding: 0.1rem 0 0 0.1rem;
      }

      .info {
        margin-left: 1.9rem;

        span {
          display: block;
        }

        .tit {
          line-height: 0.54rem;
          font-size: 0.32rem;
          padding-top: 0.2rem;
          ellipsis();
        }

        .desc {
          line-height: 0.4rem;
          color: #ccc;
          ellipsis();
        }

        .more {
          display: inline-block;
          background: #ff9300;
          margin-top: 0.16rem;
          line-height: 0.44rem;
          padding: 0 0.2rem;
          border-radius: 0.6rem;
          color: #fff;
        }
      }
    }
  }
}
</style>
